<!--    MD5 加密模块  -->
<template>
    <div class="container">
      <!--  面包屑导航 -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
          <li class="breadcrumb-item"><a href="#">编程相关</a></li>
          <li class="breadcrumb-item active" aria-current="page">md5加密</li>
        </ol>
      </nav>

      <!--  头部卡片  -->
      <div class="card border-primary ">
        <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
        <div class="card-header bg-info">md5加密</div>
        <div class="card-body ">
          <h5 class="card-title text-primary">将输入明文，使用md5加密算法成密文，不带盐值呦~</h5>
          <p class="card-text"></p>
          <button type="button" @click="getSecret" class="btn btn-outline-success">加密</button>

          <div class="form-group mx-sm-3 mb-2 d-inline-block">
            <input type="text" v-model="before" class="form-control" id="inputPassword2" placeholder="输入要加密的内容">
          </div>

          <!--  旋转提示组件  -->
          <div class="spinner-border text-success ml-5" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
      </div>

      <div class="mt-3 border-primary">
        <span>加密后的内容为：</span>
        <span>{{ after }}</span>
      </div>

    </div>

</template>

<script>
  export default {
    name: 'MD5',
    data() {
      return {
        before: "",
        /*  加密之后的密文   */
        after: ""
      }
    },
    methods: {
      /*  数值转换为 16 进制 */
      async getSecret() {
        this.$(".spinner-border").css("display", "inline-block");
        const result = await this.$http.get("http://116.62.157.224:8081/md5", {
          params: {
            text: this.before
          }
        });
        console.log(result.data);
        this.after = result.data;

        if (this.after !== "") {
          this.$(".spinner-border").css("display", "none");

        }
      },
    }
  }
</script>

<style scoped>
  .spinner-border {
    display: none;
  }
</style>
